<template>
  <div>
    <el-form label-width="6vw">
      <el-form-item label="设备编号:" prop="deviceCode">
        <el-select v-model="reelConfig.deviceCode" placeholder="设备编号">
          <el-option
            v-for="item of deviceList"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item label="配方编号">
        <el-input
          v-model="reelConfig.recipeNo"
          placeholder="配方编号"
        ></el-input>
      </el-form-item> -->
      <el-form-item :label="$t('editFormula.recipeName')">
        <el-input
          v-model="reelConfig.recipeName"
          :placeholder="$t('editFormula.recipeName')"
        ></el-input>
      </el-form-item>

      <el-form-item label="产品型号">
        <el-input
          v-model="reelConfig.productModel"
          placeholder="产品型号"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('editFormula.customerName')">
        <el-input
          v-model="reelConfig.customerCode"
          :placeholder="$t('editFormula.customerName')"
        ></el-input>
      </el-form-item>
      <el-form-item label="包装规范">
        <el-input
          v-model="reelConfig.packingCode"
          placeholder="包装规范"
        ></el-input>
      </el-form-item>
      <el-form-item label="标签规范">
        <el-select v-model="reelConfig.packingLabelCode" placeholder="标签规范">
          <el-option
            v-for="item of packingLabel"
            :label="item"
            :value="item"
            :key="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="封装形式">
        <el-input
          v-model="reelConfig.formFactor"
          placeholder="封装形式"
        ></el-input>
      </el-form-item>

      <!-- <el-form-item :label="$t('editFormula.grade')">
        <el-input
          v-model="reelConfig.grade"
          :placeholder="$t('editFormula.grade')"
        ></el-input>
      </el-form-item> -->
      <!-- <el-form-item :label="$t('editFormula.type')">
        <el-select
          v-model="currentReel.reelType"
          :placeholder="$t('editFormula.type')"
          @change="reelTypeChange"
        >
          <el-option
            v-for="item of reelType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
        /></el-select>
      </el-form-item> -->
      <!-- <el-form-item :label="$t('editFormula.reelName')">
        <el-input
          v-model="currentReel.name"
          :placeholder="$t('editFormula.reelName')"
        ></el-input>
      </el-form-item> -->
      <el-form-item :label="'卷盘' + $t('editFormula.partNo')">
        <el-select
          v-model="reelConfig.reelCode"
          :placeholder="$t('editFormula.partNo')"
          filterable
          @change="partNoChange"
        >
          <el-option
            v-for="item of material.reel"
            :label="item.materialCode"
            :value="item.materialCode"
            :key="item.materialCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('editFormula.reelDescribe')">
        <el-input
          v-model="reelConfig.reelDesc"
          :placeholder="$t('editFormula.reelDescribe')"
        ></el-input>
      </el-form-item>
      <el-form-item :label="$t('editFormula.reelSize')">
        <el-input
          v-model="reelConfig.sizeType"
          :placeholder="$t('editFormula.reelSize')"
          readonly
        ></el-input>
      </el-form-item>
      <el-form-item label="卷盘直径">
        <el-input-number
          :min="0"
          v-model="reelConfig.reelDiameter"
          placeholder="卷盘直径"
          readonly
        ></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('editFormula.reelThickness')">
        <el-input-number
          :min="0"
          v-model="reelConfig.reelThickness"
          :placeholder="$t('editFormula.reelThickness')"
          readonly
        ></el-input-number>
      </el-form-item>
      <el-form-item label="整盘芯片数量">
        <el-input-number
          v-model="reelConfig.baseQuantity"
          placeholder="整盘芯片数量"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="保护带料号">
        <el-select
          v-model="reelConfig.beltCode"
          placeholder="保护带料号"
          clearable
          filterable
        >
          <el-option
            v-for="item of material.protectiveBelts"
            :label="item.materialCode"
            :value="item.materialCode"
            :key="item.materialCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="泡棉料号">
        <el-select
          v-model="reelConfig.protectiveTapeCode"
          placeholder="泡棉料号"
          clearable
          filterable
        >
          <el-option
            v-for="item of material.foam"
            :label="item.materialCode"
            :value="item.materialCode"
            :key="item.materialCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="美纹胶料号">
        <el-select
          v-model="reelConfig.maskingTapeCode"
          placeholder="美纹胶料号"
          clearable
          filterable
        >
          <el-option
            v-for="item of material.maskingTape"
            :label="item.materialCode"
            :value="item.materialCode"
            :key="item.materialCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="包含合并盘">
        <el-switch
          v-model="reelConfig.hasReelcombine"
          active-text="是"
          inactive-text="否"
        ></el-switch>
      </el-form-item>
      <el-form-item label="有无追溯标签">
        <el-switch
          v-model="reelConfig.traceLabel"
          active-text="有"
          inactive-text="无"
        ></el-switch>
      </el-form-item>
      <template v-if="reelConfig.traceLabel">
        <el-form-item label="追溯标签位置">
          <el-select
            v-model="reelConfig.traceLabelSide"
            placeholder="追溯标签位置"
          >
            <el-option label="正面" :value="0"></el-option>
            <el-option label="反面" :value="1"></el-option>
          </el-select>
        </el-form-item>
      </template>
      <el-form-item label="是否排序">
        <el-switch
          v-model="reelConfig.inOrderEnale"
          active-text="是"
          inactive-text="否"
        ></el-switch>
      </el-form-item>

      <!-- <el-form-item :label="$t('editFormula.labelGroup')">
        <el-input v-model="reelConfig.labelGroup" :placeholder="$t('editFormula.labelGroup')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('editFormula.specialLabel')">
        <el-input v-model="reelConfig.specialLabel" :placeholder="$t('editFormula.specialLabel')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('editFormula.boxReelQuantity')">
        <el-input v-model="reelConfig.boxReelQuantity" :placeholder="$t('editFormula.boxReelQuantity')"></el-input>
      </el-form-item>
      <el-form-item :label="$t('editFormula.boxStandingTime')">
        <el-input v-model="reelConfig.boxStandingTime" :placeholder="$t('editFormula.boxStandingTime')"></el-input>
      </el-form-item> -->
      <el-form-item label="不满盘缠绕">
        <el-checkbox-group v-model="reelConfig.scattered">
          <el-checkbox label="保护带" value="protectiveTape" />
          <el-checkbox label="泡棉" value="foam" />
        </el-checkbox-group>
      </el-form-item>

      <!-- <el-form-item :label="$t('editFormula.boxSortPrint')">
        <el-select
          v-model="reelConfig.boxSortPrint"
          :placeholder="$t('editFormula.boxSortPrint')"
        >
          <el-option
            :label="$t('editFormula.notSorted')"
            :value="0"
          ></el-option>
          <el-option :label="$t('editFormula.ascende')" :value="1"></el-option>
          <el-option :label="$t('editFormula.descende')" :value="2"></el-option>
        </el-select>
      </el-form-item> -->
    </el-form>
  </div>
</template>
<script setup>
import { computed, onMounted, ref } from "vue";
import editStore, { sizeType, reelType } from "@/store/editStore.js";
import { useI18n } from "vue-i18n";
import { getDevice } from "@/api/recipe";

const { t: $t } = useI18n();
const store = editStore();

let sizeArr = [
  { label: "7 " + $t("common.inches"), value: "7" },
  { label: "13 " + $t("common.inches"), value: "13" },
];
let deviceList = ref([]);
let reelConfig = computed(() => store.reelConfig);
let currentReel = computed(() => store.getCurrentReel);
let material = computed(() => {
  let list = store.materialList;
  return {
    reel: list.reel,
    protectiveBelts: list.protectiveBelts,
    foam: list.foam,
    carrierTape: list.carrierTape,
    maskingTape: list.maskingTape,
  };
});
let packingLabel = computed(() => {
  return Object.keys(store.labelTemplate);
});

// watch(
//   () => reelConfig.value.sizeType,
//   (newVal) => {
//     reelConfig.value.reelDiameter = sizeType[newVal].diameter;
//   }
// );

// function reelTypeChange(val) {
//   store.changeReelType(val);
// }
function partNoChange(e) {
  let reels = material.value.reel;
  let reel = reels.find((item) => item.materialCode == e);
  if (reel) {
    reelConfig.value.reelDesc = reel.description;
    reelConfig.value.reelThickness = reel.thickness;
    reelConfig.value.sizeType = reel.size;
    reelConfig.value.reelDiameter = reel.diameter;
    reelConfig.value.frontImg = reel?.imgPath?.[0] ?? "";
    reelConfig.value.oppositeImg = reel?.imgPath?.[1] ?? "";
  }
}

async function getDeviceList() {
  try {
    deviceList.value = [];
    let res = await getDevice();
    res?.items.forEach((item) => {
      deviceList.value.push({ label: item.deviceName, value: item.deviceCode });
    });
  } catch (e) {
    ElMessage.error("获取设备信息出错");
  }
}

onMounted(() => {
  getDeviceList();
});
</script>
<style scoped lang="scss">
.globalSetting {
  .flex-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.el-form-item {
  margin-bottom: 10px;
}
.el-input-number {
  width: 100%;
}
</style>
